<template>
  <div class="user-management-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-input
          v-model="search1"
          placeholder="请输入用户名查询"
          class="search-input"
          clearable
      />
      <el-input
          v-model="search2"
          placeholder="请输入邮箱查询"
          class="search-input"
          clearable
      />
      <el-button
        type="primary"
        @click="getUserList()"
        class="action-button"
      >搜索</el-button>
      <el-button
        type="info"
        @click="resetSearch()"
        class="action-button"
      >重置</el-button>
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
      <el-table
        :data="users"
        table-layout="fixed"
        :show-overflow-tooltip="false"
        stripe
        border
      >
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column prop="id" label="序号" width="80" align="center" />
        <el-table-column label="头像" width="100" align="center">
          <template #default="scope">
            <el-avatar :size="40" :src="scope.row.userPic"/>

          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" min-width="120" />
        <el-table-column prop="nickname" label="昵称" min-width="120" />
        <el-table-column prop="phone" label="电话" min-width="120" />
        <el-table-column prop="email" label="邮箱" min-width="180" />
        <el-table-column prop="updateTime" label="更新时间" min-width="180" />
        <el-table-column label="操作" width="150" align="center" fixed="right">
          <template #default="scope">
            <el-button
              @click="resetPwd(scope.row)"
              type="primary"
              size="small"
              plain
            >重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[6, 9, 12, 15]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalUsers"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>


<style scoped>
.user-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  height: calc(100vh - 140px);
}

.search-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-input {
  width: 220px;
  margin-right: 15px;
}

.action-button {
  margin-left: 10px;
}

.table-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 表格行hover效果 */
.el-table :deep(.el-table__body tr:hover>td) {
  background-color: #f0f7ff !important;
}
</style>


<script setup lang="ts">
import {ref, onMounted, reactive} from 'vue';

import {ElMessage, ElTable,ElMessageBox } from 'element-plus'
import request from "@/api/request";


interface User {
  id: number | null;
  userPic: string;
  username: string;
  nickname: string;
  phone: string;
  email: string;
  creatTime: any;
  updateTime: any;
}

const pageNum = ref(1); // 从1开始
const pageSize = ref(6);
const totalUsers = ref(0); // 用于存储总用户数

const users = ref<User[]>([]);
const search1 = ref('');
const search2 = ref('');




// 获取用户列表
const getUserList = () => {
  request.get('/admin/userList', {
    params: {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      username: search1.value,
      email: search2.value,
    },
  }).then((res: any) => {
    users.value = res.data.items; // 假设返回的数据结构是这样的
    totalUsers.value = res.data.total; // 假设返回的总数在这里
    if (res.data.total.length === 0){
      console.log('不存在该用户')
      ElMessage.warning('不存在该用户');
    }
  }).catch((error: any) => {
    console.error('获取用户失败:', error); // 处理错误
  });
};


//编辑用户
const resetPwd = (user: User) => {

  ElMessageBox.confirm(
      '确定要重制该用户密码吗?',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        request.patch('/admin/resetPwd', {
          username: user.username,
        }).then((res: any) => {
          // 这里可以添加成功后的逻辑
          ElMessage({
            type: 'success',
            message: '重置成功',
          })
          getUserList();
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消',
        })
      })
};



const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  pageSize.value = val; // 更新页面大小
  getUserList(); // 更新用户列表
};

const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  pageNum.value = val; // 更新当前页码
  getUserList(); // 更新用户列表
};
//重置搜索框
const resetSearch = () => {
  search1.value = ''
  search2.value = ''
  getUserList()
};

onMounted(() => {
  getUserList(); // 组件挂载时获取用户列表
});
</script>
